<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的钱包</title>
<link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">
<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<script type="text/javascript">
	$(function() {
		$("#header").load("header.html");
		
	})
</script>
</head>
<body>
	<div id="header"></div>
	<div id="app" class="container">
		<p>我的账户余额:{{balance}}元</p>
		<div v-if="role==1">
			<button class="btn btn-outline-primary" @click="confirmPay" :disabled="toPay">充值</button>
			<div v-show="toPay">
				充值金额:<input type="number" v-model="num"/>
				<button class="btn btn-outline-primary" @click="inAct(wallet)">确认充值</button>
			</div>
		</div>
		<div v-else>
			<button class="btn btn-outline-primary" @click="confirmOut" :disabled="toOut">取现</button>
			<div v-show="toOut">
				提现金额:<input type="number" v-model="num2"/>
				<button class="btn btn-outline-primary" @click="outAct(wallet)">确认提现</button>
			</div>
		</div>
	</div>
	
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			balance:0,
			role:"",
			wallet:null,
			toPay:false,
			toOut:false,
			num:100,
			num2:"",
		},
		mounted(){
			axios.get("/user/balance")
				.then(
					res => {
						if(res.data.code==1){
							this.wallet = res.data.data;
							this.balance = res.data.data.balance;
							this.role = res.data.data.user.role;
						}else{
							layer.alert("系统维护中，请稍后再试");
						}
					}
				)
		},
		methods:{
			inAct:function(w){
				if(this.num<=0){
					layer.msg("充值金额非法");
					this.num = -this.num;
					return ;
				}
				location.href = "/alipay/pay?id="+w.id+"&num="+this.num;
			},
			outAct:function(w){
				if(this.num2>this.balance){
					layer.msg("账户余额不足");
					return;
				}
				if(this.num2<=0){
					layer.msg("提现金额错误");
					return;
				}
				axios.get("/alipay/outPay?amount="+this.num2)
				.then(
					res => {
						console.log(res.data);
						if(res.data.success=="true"){
							this.balance = this.balance - this.num2;
						}
						this.num2="";
						layer.alert(res.data.des);
					}
				)
			},
			confirmPay:function(){
				this.toPay=true;
			},
			confirmOut:function(){
				this.toOut=true;
			}
		}
	})
</script>
</html>